import Taro, { Component } from '@tarojs/taro'
import { View, Image, Text, Input, ScrollView } from '@tarojs/components'
import './index.scss'
import { parsePrice } from '@utils/utils'
import Production from '../../components/production'
import { getWindowHeight } from '@utils/style'
import classNames from 'classnames'
import './index.scss'
import * as actions from '@actions/product'
import { connect } from '@tarojs/redux'
import searchCol from '@assets/icon/search-col.png'
import searchCol2 from '@assets/icon/search-col2.png'
import search from '@assets/icon/search.png'

@connect(state => state.product, { ...actions })
class SearchProdShow extends Taro.Component {
    config = {
        navigationBarTitleText: '商品列表'
    }
    state = {
        loaded: false,
        loading: false,
        sts: 0,
        showType: 2,
        prodName: '',
        current: 0,
        hasMore: true
    }
    constructor(props) {
        super(props)
        this.prodName = this.$router.params.prodName
    }
    componentDidMount() {
        this.loadData()
        this.setState({ loaded: true })
    }
    loadData = () => {
        if (!this.state.hasMore || this.state.loading || this.state.current > this.props.pages) {
            return
        }
        this.setState({
            current: this.state.current + 1,
            loading: true
        })
        this.props.dispatchSearchProd({
            prodName: this.state.prodName,
            current: this.state.current + 1,
            size: 10,
            sort: this.state.sts
        }).then(res => {
            // console.log(res)
            if (!!res) {
                this.setState({
                    loading: false,
                    hasMore: true
                })
            } else {
                this.setState({
                    hasMore: false
                })
            }
        }).catch(() => {
            this.setState({ loading: false })
        })
    }
    search() {
        this.loadData()
    }
    handelChange(e) {
        this.setState({
            prodName: e.target.value,
            current: 0
        })
    }
    onStsTap(sts) {
        this.setState({
            sts: sts,
            current: 0
        })
        this.props.dispatchSearchProd({
            prodName: this.state.prodName,
            current: 1,
            size: 10,
            sort: sts
        }).then(res => {
            if (!!res) {
                this.setState({
                    loading: false,
                    hasMore: true
                })
            } else {
                this.setState({
                    hasMore: false
                })
            }
        }).catch(() => {
            this.setState({ loading: false })
        })
    }
    changeShowType() {
        this.setState({
            showType: this.state.showType === 2 ? 1 : 2,
        })
    }
    product(item) {
        return (
            <View className='show-item' bindtap='toProdPage' data-prodid={item.prodId}>
                <View className='more-prod-pic'>
                    <Image src={item.pic} className='more-pic' />
                </View>
                <View className='prod-text-right'>
                    <View className='prod-text more'>{item.prodName}</View>
                    <View className='cate-prod-info'>{item.praiseNumber}评价 {item.positiveRating}%好评</View>
                    <View className='prod-price more'>
                        <Text className='symbol'>￥</Text>
                        <Text className='big-num'>{parsePrice(item.price)[0]}</Text>
                        <Text className='small-num'>.{parsePrice(item.price)[1]}</Text>
                    </View>
                </View>
            </View>
        )
    }
    productList(list) {
        const product = (list || []).map(item => {
            return this.product(item)
        })
        return (
            <View className='prod-list'>
                <View className='cont-item'>
                    {
                        product
                    }
                </View>
            </View>
        )
    }

    render() {
        if (!this.state.loaded) {
            return (
                <View className='loading'>
                    <Text className='loading-txt'>正在加载中...</Text>
                </View>
            )
        }
        const { showType, sts, prodName } = this.state
        const { prodList } = this.props
        return (
            <View className='container'>
                {/* <!-- 搜索框 --> */}
                <View className='fixed-box'>
                    <View className='search-bar'>
                        <View className='search-box'>
                            <Input onBlur={() => this.search()} onChange={this.handelChange.bind(this)} className='sear-input' value={prodName} />
                            <Image src={search} className='search-img' />
                        </View>
                        <View className='search-list-img' onClick={() => this.changeShowType()}>
                            {showType === 1 &&
                                <Image className='img-item' src={searchCol} />
                            }
                            {showType === 2 &&
                                <Image className='img-item' src={searchCol2} />
                            }
                        </View>
                    </View>
                    <View className='tabs'>
                        <Text className={classNames('tab-item complete', sts === 0 && 'tab-item complete on')} onClick={() => this.onStsTap(0)} data-sts="0">综合</Text>
                        <Text className={classNames('tab-item', sts === 1 && 'tab-item on')} onClick={() => this.onStsTap(1)} data-sts="1">销量</Text>
                        <Text className={classNames('tab-item', sts === 2 && 'tab-item on')} onClick={() => this.onStsTap(2)} data-sts="2">价格</Text>
                    </View>
                </View>

                {/* <!-- 商品列表 --> */}
                <ScrollView
                    scrollY
                    scrollWithAnimation
                    onScrollToLower={this.loadData}
                    style={{ height: getWindowHeight() }}
                >

                    {/* <!-- 横向列表 -->  */}
                    {showType === 1 &&
                        <Production list={prodList} sts={6} />
                    }
                    {/* <!-- 纵向列表 --> */}
                    {showType === 2 &&
                        this.productList(prodList)
                    }

                    {this.state.loading &&
                        <View className='loading'>
                            <Text className='loading-txt'>正在加载中...</Text>
                        </View>
                    }
                    {!this.state.hasMore &&
                        <View className='loading loading--not-more'>
                            <Text className='loading-txt'>更多内容，敬请期待</Text>
                        </View>
                    }
                </ScrollView>


            </View>
        )
    }
}
export default SearchProdShow